<script setup>
import { ref } from "vue";
import songList from "./songList.vue";
import albums from "./albums.vue";
import singer from "@/views/libaray/content/singer.vue";
import myMvVue from "./myMv.vue";
import cloudsVue from "./clouds.vue";
import { createPlayList } from "../../../apis/music";
import { ElMessage, ElMessageBox } from "element-plus";
import { RmMessage } from "../../../utils/RmMessage";
import { storeToRefs } from "pinia";
import { userStore } from "@/store/user";
import emitter from "../../../utils/eventBus";
const { userId, userPrivate } = storeToRefs(userStore());

const activeIndex = ref("1");

const changeIndex = (index) => {
  activeIndex.value = index;
};

const handleAdd = () => {
  ElMessageBox.prompt("请输入歌单名称", "新建歌单", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      createPlayList(value)
        .then((res) => {
          if (res.code == 200) {
            RmMessage.success("成功创建歌单,刷新后可见");
          } else {
            RmMessage.error("创建失败,请稍后重试");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    })
    .catch(() => {});
};
</script>

<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="changeIndex('1')"
          >全部歌单
          <i
            v-if="userId"
            @click.stop="handleAdd"
            class="iconfont icon-tianjia1"
          ></i
        ></el-menu-item>
        <el-menu-item index="2" @click="changeIndex('2')">专辑</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">艺人</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">mv</el-menu-item>
        <el-menu-item index="5" @click="changeIndex('5')">云盘</el-menu-item>
        <el-menu-item index="6" @click="changeIndex('6')"></el-menu-item>
      </el-menu>
    </el-header>
    <songList v-show="activeIndex === '1'"></songList>
    <albums v-show="activeIndex === '2'"></albums>
    <singer v-show="activeIndex === '3'"></singer>
    <myMvVue v-show="activeIndex === '4'"></myMvVue>
    <cloudsVue v-show="activeIndex === '5'"></cloudsVue>
  </el-container>
</template>

<style scoped lang="scss">
.el-header {
  margin-top: 20px;
  width: 100%;
  padding: 0;
  .el-menu-demo {
    // width: 100%;
    border-radius: 5px;
    border-bottom: none;
    width: 460px;
    display: flex;
    justify-content: space-evenly;
    :deep(.el-menu-item) {
      flex: 1;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 8px;
      border-bottom: none;
      border-radius: 5px;
      color: rgb(109, 100, 100);
      font-size: 17px;
      font-weight: 600;
      margin-right: 5px;
    }
    :deep(.el-menu-item:hover) {
      background-color: #f6f6f8;
    }
    :deep(.el-menu-item:focus),
    :deep(.el-menu-item.is-active) {
      color: #333;
      border-bottom: none;
      background-color: #f6f6f8;
    }
  }
}
.el-main {
  padding: 0;
}
.icon-tianjia1 {
  margin-left: 8px;
  font-size: 18px;
  transition: all 0.2s;
  &:hover {
    transform: scale(1.1);
  }
}
</style>
